Podpora za jezik CSS Counter Style: Mednarodna oblika za globalno občinstvo

V današnjem globalno povezanem svetu morajo spletni razvijalci ustvarjati spletna mesta in aplikacije, ki ustrezajo različnim ciljnim skupinam. To pomeni upoštevanje ne le jezika, temveč tudi kulturnih konvencij in številčnih sistemov, ki se uporabljajo v različnih regijah. CSS counter style zagotavljajo močan mehanizem za oblikovanje seznamov in druge oštevilčene vsebine na način, ki spoštuje te kulturne nianse. Ta obsežen priročnik bo raziskal zmožnosti CSS counter style za internacionalizacijo (i18n) in prikazal, kako jih učinkovito uporabljati.

Razumevanje CSS Counter Style

CSS števci so spremenljivke, ki jih vzdržujejo pravila CSS za sledenje, kolikokrat so uporabljeni. Uporabljajo se predvsem za oštevilčenje seznamov, naslovov in drugih elementov. CSS counter style razširjajo to funkcionalnost, saj vam omogočajo, da definirate sisteme številčenja po meri, ki presegajo standardne arabske in rimske številke. To je ključnega pomena za podporo različnih jezikov in kulturnih preferenc.

Glavne lastnosti CSS, ki so vključene v uporabo counter style so:

• counter-reset: Inicializira ali ponastavi števec na določeno vrednost.
• counter-increment: Poveča vrednost števca.
• content: Uporablja se s psevdo-elementi ::before ali ::after za prikaz vrednosti števca.
• counter() ali counters(): Funkcije, ki se uporabljajo znotraj lastnosti content za oblikovanje vrednosti števca.
• @counter-style: Definira counter style po meri z različnimi lastnostmi za nadzor oblikovanja.

Moč @counter-style

Pravilo @counter-style je srce internacionalizacije CSS counter style. Omogoča vam, da definirate sistem številčenja po meri z različnimi lastnostmi, ki nadzorujejo, kako je vrednost števca upodobljena. Oglejmo si ključne lastnosti znotraj pravila @counter-style:

• system: Določa algoritem, ki se uporablja za generiranje predstavitve števca. Pogoste vrednosti vključujejo cyclic, numeric, alphabetic, symbolic, fixed in additive.
• symbols: Določa simbole, ki jih uporablja counter style, kot so številke, črke ali znaki po meri.
• additive-symbols: Se uporablja s sistemom additive za določanje simbolov in njihovih ustreznih številskih vrednosti.
• suffix: Določa besedilo, ki je dodano za vsako predstavitev števca (npr. pika ali oklepaj).
• prefix: Določa besedilo, ki je dodano pred vsako predstavitev števca.
• range: Omejuje obseg vrednosti, za katere se counter style uporablja.
• pad: Določa najmanjše število števk, ki jih je treba uporabiti, in po potrebi dopolni z vodilnimi ničlami.
• speak-as: Nadzira, kako bralniki zaslona objavijo vrednost števca za dostopnost.
• fallback: Določa nadomestni counter style, ki se uporabi, če trenutni style ne podpira brskalnik.

Primeri internacionalizacije z @counter-style

Zdaj pa si oglejmo nekaj praktičnih primerov uporabe @counter-style za oblikovanje števcev za različne jezike in kulturne kontekste.

1. Arabske številke z arabsko-indijskimi števkami

Medtem ko se arabske številke (0-9) pogosto uporabljajo, imajo številne arabsko govoreče regije raje uporabo arabsko-indijskih števk (٠‎-٩‎). Lahko ustvarimo counter style za dosego tega:

@counter-style arabic-indic {
  system: numeric;
  symbols: '٠' '١' '٢' '٣' '٤' '٥' '٦' '٧' '٨' '٩';
  suffix: '. ';
}

ol {
  list-style: none;
  counter-reset: item;
}

ol li {
  counter-increment: item;
}

ol li::before {
  content: counter(item, arabic-indic);
}

Ta koda definira counter style z imenom arabic-indic, ki uporablja arabsko-indijske števke kot simbole. Lastnost suffix doda piko in presledek za vsakim številom. CSS nato uporabi ta style na urejen seznam (<ol>) za prikaz števil v arabsko-indijski obliki.

2. Rimske številke (velike in male črke)

Rimske številke se pogosto uporabljajo v različnih kontekstih, CSS counter style pa jih lahko enostavno obravnavajo:

@counter-style upper-roman {
  system: upper-roman;
}

@counter-style lower-roman {
  system: lower-roman;
}

ol.upper-roman {
  list-style: none;
  counter-reset: item;
}

ol.upper-roman li {
  counter-increment: item;
}

ol.upper-roman li::before {
  content: counter(item, upper-roman) '. ';
}

ol.lower-roman {
  list-style: none;
  counter-reset: item;
}

ol.lower-roman li {
  counter-increment: item;
}

ol.lower-roman li::before {
  content: counter(item, lower-roman) '. ';
}

Ta primer prikazuje, kako ustvariti rimske številke z velikimi (upper-roman) in malimi (lower-roman) črkami. Nato lahko te style uporabite za različne sezname z uporabo razredov CSS (.upper-roman in .lower-roman). Na primer:

<ol class="upper-roman">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

<ol class="lower-roman">
  <li>Element 1</li>
  <li>Element 2</li>
  <li>Element 3</li>
</ol>

3. Gruzijske številke

Gruzijske številke uporabljajo edinstven sistem črk. Lahko definiramo counter style za predstavitev števil v gruzijščini:

@counter-style georgian {
  system: fixed;
  symbols: 'ა' 'ბ' 'გ' 'დ' 'ე' 'ვ' 'ზ' 'თ' 'ი' 'კ' 'ლ' 'მ' 'ნ' 'ო' 'პ' 'ჟ' 'რ' 'ს' 'ტ' 'უ' 'ფ' 'ქ' 'ღ' 'ყ' 'შ' 'ჩ' 'ც' 'ძ' 'წ' 'ჭ' 'ხ' 'ჯ' 'ჰ';
  suffix: '. ';
  range: 1 33;
}

ol.georgian {
  list-style: none;
  counter-reset: item;
}

ol.georgian li {
  counter-increment: item;
}

ol.georgian li::before {
  content: counter(item, georgian);
}

Ta primer uporablja sistem fixed, ker ima gruzijski številčni sistem omejen nabor simbolov za prvih 33 števil. Lastnost range omejuje counter style na vrednosti med 1 in 33. Za števila, večja od 33, bi morali implementirati bolj zapleteno logiko ali drug sistem številčenja.

4. Armenske številke

Podobno kot gruzijske, tudi armenske številke uporabljajo črke za predstavitev števil:

@counter-style armenian {
  system: fixed;
  symbols: 'Ա' 'Բ' 'Գ' 'Դ' 'Ե' 'Զ' 'Է' 'Ը' 'Թ' 'Ժ' 'Ի' 'Լ' 'Խ' 'Ծ' 'Կ' 'Հ' 'Ձ' 'Ղ' 'Ճ' 'Մ' 'Յ' 'Ն' 'Շ' 'Ո' 'Չ' 'Պ' 'Ջ' 'Ռ' 'Ս' 'Վ' 'Տ' 'Ր' 'Ց' 'Ւ' 'Փ' 'Ք' 'Օ' 'Ֆ';
  suffix: '. ';
  range: 1 39;
}

ol.armenian {
  list-style: none;
  counter-reset: item;
}

ol.armenian li {
  counter-increment: item;
}

ol.armenian li::before {
  content: counter(item, armenian);
}

Ta primer je podoben gruzijskemu primeru, uporablja sistem fixed in definira armenske črke kot simbole. range je nastavljen na 1-39, kar pokriva osnovni armenski nabor števil.

5. CJK številke (kitajske, japonske, korejske)

CJK številke ponujajo večjo zapletenost, z različnimi oblikami za formalne in neformalne kontekste ter različnimi stopnjami zrnatosti. Oglejmo si poenostavljeno kitajščino:

@counter-style simplified-chinese {
  system: numeric;
  symbols: '一' '二' '三' '四' '五' '六' '七' '八' '九';
  suffix: '';
}

@counter-style simplified-chinese-formal {
  system: fixed;
  symbols: '零' '壹' '贰' '叁' '肆' '伍' '陆' '柒' '捌' '玖';
  suffix: '';
}

ol.simplified-chinese {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese li {
  counter-increment: item;
}

ol.simplified-chinese li::before {
  content: counter(item, simplified-chinese) '、';
}

ol.simplified-chinese-formal {
  list-style: none;
  counter-reset: item;
}

ol.simplified-chinese-formal li {
  counter-increment: item;
}

ol.simplified-chinese-formal li::before {
  content: counter(item, simplified-chinese-formal) '、';
}

Upoštevajte, da je to poenostavljena predstavitev. Popolna podpora za CJK številke, zlasti za večja števila, bi zahtevala bolj zapleteno implementacijo, ki bi vključevala sistem additive in obravnavo mestnih vrednosti (desetice, stotice, tisočice itd.). Ta koda prikazuje osnovno predstavitev števil.

Napredne tehnike in premisleki

1. Kombiniranje Counter Style

Lahko kombinirate več counter style za ustvarjanje bolj zapletenih shem številčenja. Na primer, lahko uporabite primarni števec za poglavja in sekundarni števec za razdelke znotraj vsakega poglavja.

body {
  counter-reset: chapter section;
}

h1 {
  counter-increment: chapter;
  counter-reset: section;
}

h2 {
  counter-increment: section;
}

h1::before {
  content: counter(chapter) '. ';
}

h2::before {
  content: counter(chapter) '.' counter(section) '. ';
}

Ta koda ustvari hierarhični sistem številčenja, kjer so poglavja oštevilčena zaporedno, razdelki pa so oštevilčeni znotraj vsakega poglavja (npr. 1.1, 1.2, 2.1, 2.2).

2. Premisleki o dostopnosti

Zagotovite, da so vaši counter style dostopni uporabnikom s posebnimi potrebami. Uporabite lastnost speak-as za nadzor, kako bralniki zaslona objavijo vrednost števca. Na primer:

@counter-style my-style {
  system: numeric;
  symbols: '1' '2' '3';
  speak-as: numbers;
}

Lastnost speak-as: numbers; pove bralniku zaslona, da objavi vrednost števca kot število. Druge možnosti vključujejo spell-out (za izpis števila) in bullets (za objavo števca kot točke).

Poleg tega zagotovite nadomestno besedilo ali opise za vse simbole po meri, ki se uporabljajo v vaših counter style, da zagotovite, da uporabniki z motnjami vida razumejo pomen oštevilčene vsebine.

3. Združljivost brskalnikov

Medtem ko CSS counter style široko podpirajo sodobni brskalniki, je pomembno upoštevati starejše različice brskalnikov. Uporabite lastnost fallback za določitev nadomestnega counter style, ki se bo uporabil, če brskalnik ne podpira primarnega style. Na primer:

@counter-style my-style {
  system: cyclic;
  symbols: '✓' '✗';
  fallback: disc;
}

V tem primeru, če brskalnik ne podpira sistema cyclic ali simbolov po meri, se bo vrnil na style seznama disc.

4. Kulturna občutljivost

Pri implementaciji counter style za različne jezike in kulture bodite pozorni na kulturne občutljivosti. Raziščite ustrezne konvencije in simbole številčenja, ki se uporabljajo v vsaki regiji. Izogibajte se uporabi simbolov ali formatov, ki so lahko žaljivi ali neprimerni.

Na primer, nekatere kulture imajo morda raje uporabo različnih ločil ali ločil v svojih sistemih številčenja. Zagotovite, da vaši counter style spoštujejo te preference.

Praktične aplikacije in primeri uporabe

CSS counter style se lahko uporabljajo v številnih scenarijih spletnega razvoja, vključno z:

• Ustvarjanje kazal table vsebine: Samodejno oštevilčite naslove in podnaslove v kazalu vsebine.
• Ustvarjanje oštevilčenih seznamov: Oblikujte oštevilčene sezname v različnih jezikih in style.
• Oštevilčenje korakov v vadnici: Vodite uporabnike skozi vrsto korakov z jasnim in vizualno privlačnim številčenjem.
• Implementacija straničenja po meri: Ustvarite kontrole straničenja po meri z edinstvenimi shemami številčenja.
• Prikaz uvrščenih seznamov: Pokažite uvrstitve na vizualno privlačen način z uporabo različnih counter style.
• Ustvarjanje pravnih dokumentov: Oblikujte pravne dokumente s posebnimi zahtevami za številčenje.
• Oblikovanje znanstvenih člankov: Prikažite enačbe, slike in tabele z ustreznim številčenjem.

Najboljše prakse za uporabo CSS Counter Style

Če želite zagotoviti, da so vaši CSS counter style učinkoviti in vzdržljivi, upoštevajte te najboljše prakse:

• Uporabite opisna imena za svoje counter style: Izberite imena, ki jasno označujejo namen in oblikovanje style (npr. arabic-indic, upper-roman, georgian).
• Naj bodo vaši counter style modularni: Določite ločene counter style za različne jezike in sisteme številčenja.
• Uporabite razrede CSS za uporabo counter style: Izogibajte se uporabi counter style neposredno na elemente; namesto tega uporabite razrede CSS za nadzor oblikovanja.
• Temeljito preizkusite svoje counter style: Preizkusite svoje counter style v različnih brskalnikih in napravah, da zagotovite pravilno upodabljanje.
• Dokumentirajte svoje counter style: Zagotovite jasno dokumentacijo za svoje counter style, vključno z njihovim namenom, oblikovanjem in uporabo.
• Dajte prednost dostopnosti: Pri ustvarjanju counter style vedno upoštevajte dostopnost in uporabite lastnost speak-as, da zagotovite, da bralniki zaslona pravilno objavijo vrednosti števcev.

Zaključek

CSS counter style zagotavljajo močan in prilagodljiv mehanizem za internacionalizacijo oblikovanja oštevilčene vsebine na spletu. Z izkoriščanjem pravila @counter-style in njegovih različnih lastnosti lahko ustvarite sisteme številčenja po meri, ki spoštujejo kulturne konvencije in jezikovne nianse različnih regij. Z upoštevanjem najboljših praks, opisanih v tem priročniku, lahko zagotovite, da so vaši counter style učinkoviti, vzdržljivi in dostopni globalnemu občinstvu. Ker se spletni razvoj še naprej razvija, bo razumevanje in uporaba CSS counter style za internacionalizacijo vse pomembnejša za ustvarjanje resnično vključujočih in uporabniku prijaznih spletnih izkušenj. Sprejmite moč CSS counter style in ustvarite spletna mesta, ki odmevajo pri uporabnikih iz vseh koncev sveta.

Dodatno branje

• MDN Web Docs: @counter-style
• CSS Counter Styles Level 3
• A Complete Guide to CSS Counter Styles